/**
* @file  Dev
* @author xiao_xie
* @date 2025-03-14
*/

import classNames from "classnames";
import { useDropComponent } from "../../../../hooks/useDropComponent";
import React from "react";

type DevProps = {
  children: React.ReactNode;
  accept: Array<string>
  id: number
}
const Dev = ({ id, accept, children }: DevProps) => {
  const { isOver, drop } = useDropComponent(id, accept);
  const cls = classNames(['bg-white w-full h-full overflow-scroll', isOver ? 'border-2 border-dashed border-[#6366F1] ' : 'border-2 border-solid border-transparent']);

  return <div
    data-component-id={id}
    ref={drop}
    className={cls}>
    {React.Children.toArray(children).length > 0 ? children : <div className="flex w-full h-full justify-center items-center text-sm text-gray-500">
      从左侧面板拖入组件，以构建页面
    </div>}</div>;
};
export default Dev;
